<script setup lang="ts">
import { ref } from "vue";

const swiperItems = ref([
  { title: "心仪商品、琳琅满目", icon: "../../static/images/splash/1.png" },
  { title: "优质商家、物美价廉", icon: "../../static/images/splash/2.png" },
  { title: "美不胜收、满载而归", icon: "../../static/images/splash/3.png" },
  { title: "真情服务、方便贴心", icon: "../../static/images/splash/4.png" }
]);

const onReLaunch = () => {
  // 由于首页是index程序启动时已经渲染这里调用返回
  uni.navigateBack({animationType: "zoom-fade-in"})
}
</script>

<!-- 启动页 -->
<template>
  <view class="page-container">
    <swiper indicator-dots class="swiper" indicator-color="#FF6A00" indicator-active-color="#fff">
      <template v-for="(item, itemIndex) in swiperItems">
        <swiper-item>
          <view class="swiper-item">
            <text class="title">{{ item.title }}</text>
            <view class="image-box">
              <image mode="heightFix" :src="item.icon"></image>
            </view>
            <button @click="onReLaunch" class="button" v-if="itemIndex === swiperItems.length - 1">
              立即体验
            </button>
          </view>
        </swiper-item>
      </template>
    </swiper>
  </view>
</template>

<style scoped lang="scss">
.page-container {
  height: 100vh;
  background: linear-gradient(155deg, rgba(255, 106, 0, 1) 0%, rgba(247, 207, 177, 1) 50%, rgba(255, 106, 0, 1) 100%);
}

.swiper {
  height: calc(100vh - 80rpx);
  padding-bottom: 80rpx;

  .swiper-item {
    text-align: center;
    margin-top: 200rpx;

    .title {
      font-size: 52rpx;
      color: #fff;
    }

    .image-box {
      margin-top: 220rpx;
    }

    .button {
      width: 288rpx;
      height: 88rpx;
      border-radius: 146rpx;
      background-color: #FF6A00;
      color: #fff;
      margin-top: 200rpx;

      &:active {
        opacity: 0.6;
      }
    }
  }
}
</style>
